<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>查询酒店</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../css/index/hotel/location.css">
</head>
<body style="cursor: pointer">
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-pull-left aui-btn" onclick="back();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">酒店位置</div>
    </header>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active">行政区</div>
        <div class="aui-tab-item">商业圈</div>
    </div>
    <div class="aui-content location_box">
        <!--行政区-->
        <ul class="aui-list aui-list-in" id="administrative">

        </ul>
        <!--商业圈-->
        <ul class="aui-list aui-list-in" id="business">

        </ul>
    </div>
</body>
</html>
<script src="../../../script/aui/api.js"></script>
<script src="../../../script/aui/aui-tab.js"></script>
<script src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script src="../../../script/common.js"></script>
<script src="../../../script/extend/doT.min.js"></script>
<script src="../../../script/config.js"></script>
<script type="text/x-dot-template" charset="utf-8" id="CommericalLocations">
    {{ if(it=='暂无'){ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="margin:0 auto;">没有相关数据！</div>
            </div>
        </li>
    {{ }else{ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" code="">不限</div>
                <i class="aui-iconfont aui-icon-correct tick"></i>
            </div>
        </li>
        {{ for(var i=0; i< it.length; i++){ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" code="{{=it[i].code}}">{{=it[i].name}}</div>
            </div>
        </li>
        {{ } }}
    {{ } }}
</script>
<script type="text/x-dot-template" charset="utf-8" id="Districts">
    {{ if(it=='暂无'){ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" style="margin:0 auto;">没有相关数据！</div>
            </div>
        </li>
        {{ }else{ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" code="">不限</div>
                <i class="aui-iconfont aui-icon-correct tick"></i>
            </div>
        </li>
        {{ for(var i=0; i< it.length; i++){ }}
        <li class="aui-list-item" onclick="has_seleced(this)">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title" code="{{=it[i].code}}">{{=it[i].name}}</div>
            </div>
        </li>
        {{ } }}
    {{ } }}
</script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        //设置高度
        var header = $api.byId('header');
        $api.fixStatusBar(header);

        //初始化tab
        let tab = new auiTab({
            element : document.getElementById("tab"),
            index : 1,
            repeatClick : false
        },function(ret) {
            if(ret.index === 1){
                $('#administrative').css('display','block');
                $('#business').css('display','none');
            }else{
                $('#business').css('display','block');
                $('#administrative').css('display','none');
            }
        });

        //获取缓存信息
        let hotelData = JSON.parse($api.getStorage('hotel_data'));
        //获取当前城市的商业圈和行政区
        ajax({url:Config.hotel.getDistrict,data:{city_name:hotelData.city_name}},function(ret){
            let dataInter = ret.data['CommericalLocations'];//商业圈
            console.log(ret);
            let interText = doT.template($("#CommericalLocations").text());
            $("#business").html('').append(interText(dataInter));
            let dataInter1 = ret.data['Districts'];//行政区
            let interText1 = doT.template($("#Districts").text());
            $("#administrative").html('').append(interText1(dataInter1));
        })
    }

    function has_seleced(obj){
        let hotelData = JSON.parse($api.getStorage("hotel_data"));
        $(obj).parent().find('.tick').remove();
        let html = '<i class="aui-iconfont aui-icon-correct tick"></i>';
        $(obj).find('div div')[0].insertAdjacentHTML('afterEnd', html);
        hotelData.hotel_location = $(obj).find('div div').html();
        // alert(hotelData.hotel_location);
        let is_district = $(obj).parents("ul").attr('id');
        switch (is_district) {
            case 'administrative':
                if($(obj).find('.aui-list-item-title').attr('code').length>0){
                    hotelData.DistrictId =  $(obj).find('.aui-list-item-title').attr('code');//行政区id
                } else{
                    hotelData.DistrictId = "";
                    hotelData.BusinessZoneId = "";
                }
                break;
            case 'business':
                if($(obj).find('.aui-list-item-title').attr('code').length>0){
                    hotelData.BusinessZoneId =  $(obj).find('.aui-list-item-title').attr('code');//商圈id
                } else{
                    hotelData.DistrictId = "";
                    hotelData.BusinessZoneId = "";
                }
                break;
            default:
                console.log('未选择');
        }
        $api.setStorage('hotel_data', JSON.stringify(hotelData));
        api.sendEvent({
            name: 'setLocationEvt'
        });

        closeWin();
    }
    function back() {
        closeWin();
    }

</script>
